<template>
<div>
    <div>
        <label>编号：</label>
        <Input v-model="page.action_data.number" style="width:200px"></Input>
        
        <Button type="primary" icon="ios-search" @click="search" >搜索</Button>
    </div>
    <AutoTable :columns="columns" :data="serviceList" :page="page"></AutoTable>
    <PlatformServiceAbutmentPage v-model="detail" :id="id" @on-close="refresh()"></PlatformServiceAbutmentPage>
</div>
</template>

<script>
import util from "../../libs/util";
import PlateformServiceAbutment from "@/common/model/PlateformServiceAbutment"
import PlatformServiceAbutmentPage from "./PlatformServiceAbutmentPage"
import Page from "@/common/model/Page";
import AutoTable from "@/common/components/AutoTable";

export default {
    components: {
        AutoTable, PlatformServiceAbutmentPage
    },
    data() {
        return {
            page:new Page("search/plateform_service_abut",{}),
            detail:false,
            id: 0,
            current: new PlateformServiceAbutment(),
            columns:[
                {
                    title:"序号",
                    align:"center",
                    width:65,
                    render: (h,params) => {
                        return h('div',(this.page.current_page -1) * this.page.page_size + params.index + 1);
                    } 
                },
                {
                    title: '编号', render:(h, params) => {
                        return h('div', params.row.number);
                    }
                },
                {
                    title:"服务名称",
                    align:"left",
                    key:"title",
                },
                {
                    title:"服务简介",
                    align:"left",
                    key:"content",
                    render:(h,params) => {
                        return h('div',params.row.content.length>100?params.row.content.substring(0,100):params.row.content);
                    }
                },
                {
                    title:"申请时间",
                    align:"center",
                    key:"formated_create_time",
                    width:150,
                    render: (h, params) => { 
                        return h('strong', params.row.formated_create_time); 
                    }
                },
                {
                    title:"状态",
                    align:"center",
                    width:100,
                    render:(h,params) => {
                        return h('div',[
                            h('Button',{
                                props : { type:["","warning","success","error"][params.row.status],size:'small' },
                                style : { marginRight: '5px' }
                            },["","正在申领","申领成功","申领失败"][params.row.status])
                        ]);
                    }
                },
                {
                    title:"操作",
                    align:"center",
                    key:"action",
                    width:100,
                    render:(h,params) => {
                        return h('div',[
                            h('Button',{
                                props : { type:'info',size:'small' },
                                style : { marginRight: '5px' },
                                on: { click:() => { this.handleCheckDetial(params.row) } },
                            },'查看详情')
                        ]);
                    }
                }
            ]
        }
    },
    computed:{
        serviceList(){
            return PlateformServiceAbutment.parseList(this.page.list);
        },
    },
    methods: {
        search(){
            this.page.current_page = 1;
            this.page.getData();       
        },
        handleCheckDetial(row) {
            this.id = row.id;
            this.detail = true;
        },
        refresh()
        {
            this.page.getData();
        }
    },
    mounted () {
        if(this.$route.query.id) {
            this.id = parseInt(this.$route.query.id);
            this.detail = true;
        }
    }
}
</script>
<style scoped>
.service_detail
{
    margin: 2% 10% 2%;
    font-size: 15px;
}
</style>
